<!-- 出库管理 -->
<template>
  <view class="outboundManagement" :style="{ paddingTop: nav_height + 'px' }">
    <van-head title="出库管理">
      <template #left>
        <view class="back" @click="gotothispage">
          <van-icon name="arrow-left" />
          <!-- <text>
              返回
          </text> -->
        </view>
      </template>
    </van-head>
    <view class="search-box flexb">
      <view class="search">
        <van-search
          :value="searchValue"
          shape="round"
          background="rgba(255, 255, 255, 1)"
          placeholder="请输入编号、供应商、采购类型进行查找"
          @change="onSearch"
        />
      </view>
      <view class="screen flexc f28" @click="showFilters">
        <van-icon name="filter-o" color="#3E3D3D" />筛选
      </view>
    </view>
    <view class="content">
      <view class="item-box tc mt10" v-for="(item, index) in outList.rows" :key="index">
        <view class="plan-number-box flexb">
          <view class="plan-number-box-left f24"  @click="outGodetails(item)">
            出库编号：<text>{{ item.outbound_sn }}</text>
          </view>
          <view class="plan-number-box-right f24" @click="detail(item)">
            详情<van-icon name="arrow-down" />
          </view>
        </view>
        <view class="order-type-box flexb">
          <view class="order-type-box-left f24">
            采购单类型：<text>{{ item.outbound_type_name }}</text>
          </view>
          <view v-if="item.show_status == '待出库'" style="background: #d12312" class="order-type-box-right f24 tc">待出库</view>
          <view v-else-if="item.show_status == '待审核'" style="background: #ef9c2b" class="order-type-box-right f24 tc">待审核</view>
          <view v-else-if="item.show_status == '已出库'" style="background: #62b158" class="order-type-box-right f24 tc">已出库</view>
        </view>
        <view class="expected-time-box disFlex f24">期望领用时间：{{ item.expect_time }}</view>
        <view class="btn-sytle disFlex jcend flexWrap">
          <van-button v-if="item.del_status.status == 1" type="default" class="del" @click="delGoodsInfo(index, item)">删除</van-button>
          <van-button v-if="item.apply_status.status ==1" type="default" @click="goApplicationForm(item)">申请单</van-button>
          <van-button v-if="item.confirm_status.status ==1" type="default" @click="ConfirmedDelivery(item)">确认出库</van-button>
          <van-button v-if="item.edit_status.status ==1" type="default" @click="DetailEditor(item)" >编辑</van-button>
          <van-button v-if="item.principal_status.status ==1" type="default"  @click="goCanteenSupervisorAudit(item)" class="examine" >审核</van-button >
          <van-button v-if="item.outbound_confirm_status.status ==1"  type="default" @click="goOutboundOrder(item)">出库单</van-button>
        </view>
      </view>
    </view>
    <view class="btn-box flexc mt100">
      <van-button plain type="primary" @click="goOutboundApplication">
        <van-icon name="add-o" size="16px" />
        <text>出库申请</text>
      </van-button>
    </view>

    <!-- 弹框 -->
    <van-overlay :show="detailShow" >
      <view class="wrapper flexc">
        <view class="block">
          <view class="title flexb">
            <view class="title-left f36 fwbold"> 详情 </view>
            <view class="title-right   tc" @click="offShow">
              <van-icon name="clear" size="20" />
              </view>
          </view>
          <van-cell-group>
            <van-field
              :value="detailInfo.outbound_sn"
              name="outbound_sn"
              label="出库编号："
              readonly
            ></van-field>
            <van-field
              :value="detailInfo.outbound_type_name"
              name="outbound_type_name"
              label="采购单类型："
              readonly
            ></van-field>
            <van-field
              :value="detailInfo.applyname"
              name="applyname"
              label="申请人姓名："
              readonly
            ></van-field>
            <van-field
              :value="detailInfo.show_status_id"
              name="show_status"
              label="当前状态："
              readonly
            >
              <view slot="input" class="statustext" :style="{ background: statusList.find((item) => item.value == detailInfo.show_status_id).color,}" >
                {{ statusList.find( (item) => item.value == detailInfo.show_status_id ).label }}
              </view>
            </van-field>
            <van-field
              :value="detailInfo.outbound_reason"
              label="出库原因："
              readonly
            ></van-field>
            <van-field
              :value="detailInfo.outbound_examine_status"
              name="outbound_examine_status"
              label="出库审核状态："
              readonly
              title-width="100"
            >
            </van-field>
            <van-field
              :value="detailInfo.principal_examine_status"
              name="principal_examine_status"
              label="食堂负责人审核情况:"
              title-width="130"
              readonly
            ></van-field>
          </van-cell-group>
        </view>
      </view>
    </van-overlay>
    <!-- 筛选条件 -->
    <van-popup
      :show="show"
      custom-style="width: 80%"
      @close="onFilterClose"
      position="right"
      root-portal
    >
      <view class="popbox">
        <view class="top flexb f26">
          <view> 筛选条件 </view>
          <van-icon @click="offShow" name="clear" size="50rpx"></van-icon>
        </view>
        <view class="form-box">
          <van-input
            v-model="screenForm.outbound_sn"
            clearable
            label="出库编号编号"
            placeholder="请填写出库"
            :norequired="true"
          >
          </van-input>
          <van-input
            v-model="screenForm.applyname"
            clearable
            label="申请姓名"
            placeholder="请填写出库"
            :norequired="true"
          ></van-input>
          <my-multi-calendar
            :form="screenForm"
            name="add_time"
            @click-input="changeDate"
            label="出库日期"
            placeholder="出库日期"
            :norequired="true"
          ></my-multi-calendar>
          <my-picker
            :form="screenForm"
            name="principal_examine_name"
            @click-input="changeStatusType"
            :columns="screenStatusList"
            value-key="principal_examine_name"
            label="出库审核状态"
            placeholder="请选择"
            :norequired="true"
          ></my-picker>
          <my-picker
            :form="screenForm"
            name="type"
            @click-input="changeFormType"
            :columns="outBoundTypeList"
            value-key="type_name"
            label="采购单类型"
            placeholder="请选择"
            :norequired="true"
          ></my-picker>
        </view>
        <view class="btn-style flexb">
          <van-button color="#999999" type="info" @click="screenReset" >重置</van-button>
          <van-button color="#62B158" type="info" @click="screenSubmit" >提交</van-button >
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script>
import { statusList } from "../../utils/types";
export default {
  data() {
    return {
      searchValue: "",
      detailShow: false,
      outList: [],
      detailInfo: {}, //列表信息
      outbound_sn: "", //出库单号
      statusList,
      show: false,
      form: {},
      screenForm: {
        //筛选
        outbound_sn: "", //出库编号编号
        applyname: "", //申请姓名
        add_time: "", //日期显示
        add_start_time:"", //开始时间
        add_end_time: "", //结束时间|
        principal_examine_name: "", //出库审核状态
        outbound_type: "", //采购单类型
        outbound_examine_status: "", //出库审核状态id
      },
      outBoundTypeList: [], //采购单类型数据列
      screenStatusList: [], //出库审核状态
      childlist: [],
    };
  },

  // 监听页面加载，该钩子被调用时
  onLoad(options) {},
  methods: {
    gotothispage() {
      uni.switchTab({
        url: "./../ele/ele",
      });
    },
    /*搜索（导航）*/
    async onSearch(value) {
      let res = await this.$ajax.outSearchindex({
        search_context: value.detail,
      });
      if (res.code == 1) {
        this.outList = res.data; // 不赋值吗 根据接口数据改变而改变
      }
    },
    /*出库单类型(筛选)*/
    async getOutBoundtype() {
      let res = await this.$ajax.outBoundtype();
      if (res.code == 1) {
        this.outBoundTypeList = res.data;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*出库审核状态*/
    changeStatusType(key, value) {
      this.$set(
        this.screenForm,
        "principal_examine_status",
        value["principal_examine_status"]
      ); //提交给后台的id
      this.$set(this.screenForm, key, value["principal_examine_name"]);
    },

    /*采购单类型(筛选)*/
    changeFormType(key, value) {
      this.$set(this.screenForm, "outbound_type", value["outbound_type"]); // 提交给后台的 书库类型id
      this.$set(this.screenForm, [key], value["type_name"]);
    },
    /*日期*/
    changeDate(key, value) {
      this.$set(this.screenForm, [key], value);
      console.log(this.screenForm[key][0], "日期");
      console.log(this.screenForm[key][1], "日期2");
      this.screenForm.add_start_time =this.screenForm[key][0];//开始日期
      this.screenForm.add_end_time = this.screenForm[key][1]; //结束日期
     
      
      this.dataShow = true;
    },
    onDateConfirm(data) {

      this.dataShow = false;
      // this.screenForm.add_time =  this.formatDate(data.detail[0]) - this.formatDate(data.detail[1]);
      // this.add_start_time = this.formatDate(data.detail[0]); //开始日期
      // this.screenForm.add_end_time = this.formatDate(data.detail[1]); //结束日期
   
    },
    onDateClose() {
      this.dataShow = false;
    },
    /*出库详情*/
    outGodetails(item) {
      uni.navigateTo({
        url:"../outboundManagement/outGodetails?outbound_sn=" + item.outbound_sn,
      });
    },
    /*筛选弹出层*/
    showFilters() {
      this.show = true;
      this.getOutBoundtype(); //出库类型
    },
    /*关闭弹出层*/
    onFilterClose() {
      this.show = false;
    },

    /*筛选重置*/
    screenReset() {
      this.screenForm = {};
      this.getList();
    },
    /*筛选提交*/
    async screenSubmit() {
      let res = await this.$ajax.outSearchindex(this.screenForm);
      if (res.code == 1) {
        if (res.data.rows.length > 0) {
          this.outList.rows = res.data.rows;
          this.show = false;
        } else {
          this.outList.rows = res.data.rows;
          this.show = false;
          uni.showToast({
            title: "未查询到相关数据信息",
            icon: "none",
          });
        }
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*列表信息*/
    async getList() {
      let res = await this.$ajax.outIndex();
      if (res.code == 1) {
        this.outList = res.data;
        this.screenStatusList = res.data.search_list.principal_examine_list;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
        uni.navigateTo({
          url: "../outboundManagement/outboundManagement",
        });
      }
    },

    /*关闭*/
    offShow() {
      this.detailShow = false;
      this.show = false;
    },
    /*详情*/
    detail(item) {
      this.detailShow = true;
      this.detailInfo = { ...item };
      this.detailInfo.principal_examine_status = this.goodsConvert(item); //食堂负责人状态
      this.detailInfo.outbound_examine_status = this.outConvert(item); // 出库单状态
    },
    /*食堂负责人状态*/
    goodsConvert(item) {
      if (item.principal_examine_status == 0) {
        return "未审核";
      } else if (item.principal_examine_status == 1) {
        return "审核";
      } else if (item.principal_examine_status == 2) {
        return "不通过";
      }
    },
    /*出库审核状态*/
    outConvert(item) {
      if (item.outbound_examine_status == 0) {
        return "未审核";
      } else if (item.outbound_examine_status == 1) {
        return "审核";
      } else if (item.outbound_examine_status == 2) {
        return "不通过";
      }
    },

    /*确认出库*/
    ConfirmedDelivery(item) {
      uni.navigateTo({
        url: "../outboundManagement/confirmedDelivery?outbound_sn=" + item.outbound_sn + "&outbound_type=" + item.outbound_type,
      });
    },
    /*编辑 */
    DetailEditor(item) {
      uni.navigateTo({
        url: "../outboundManagement/outboundApplication?outbound_sn=" + item.outbound_sn + "&outbound_type=" + item.outbound_type,
      });
    },

    /*申请单*/
    goApplicationForm(item) {
      uni.navigateTo({
        url: "../outboundManagement/deliveryApplicationForm?outbound_sn=" + item.outbound_sn,
      });
    },

    /*出库单*/
    goOutboundOrder(item) {
      uni.navigateTo({
        url: "../outboundManagement/outboundOrde?outbound_sn=" + item.outbound_sn,
      });
    },
    /*食堂负责人审核*/
    goCanteenSupervisorAudit(item) {
      uni.navigateTo({
        url: "../outboundManagement/canteenSupervisorAudit?outbound_sn=" + item.outbound_sn,
      });
    },

    /*出库申请*/
    goOutboundApplication() {
      uni.navigateTo({
        url: "../outboundManagement/outboundApplication",
      });
    },
    /*删除*/
    async delGoodsInfo(index, item) {
      if (item.outbound_sn) {
        let res = await this.$ajax.outDeloutbound({
          outbound_sn: item.outbound_sn,
        });
        if (res.code == 1) {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
          this.getList();
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      }
    },
  },

  mounted() {
    this.getList(); //列表信息
  },

  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    this.childlist = this.allPermission.find((item) => item.id == uni.getStorageSync("childId")).childlist;
    console.log(this.childlist);
    uni.setNavigationBarTitle({
      title: "出库管理",
    });
    this.setDetailData({});
  },

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {
    this.getList(); //列表信息
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 500);
  },

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>

<style lang="scss">
.statustext {
  padding: 10rpx 20rpx;
  background: red;
  color: #fff;
  border-radius: 60rpx;
}
text {
  padding: 10rpx 20rpx;
  color: #818181;
  border-radius: 60rpx;
}
// 筛选条件
.popbox {
  height: 100vh;
  width: 100%;
  padding: 4rpx;
  .top {
    // display: flex;
    // justify-content: space-between;
    padding: 20rpx;
    color: rgba(16, 16, 16, 1);
    // font-size: 26rpx;
    font-family: SourceHanSansSC-bold;
  }
  .form-box {
  }
  .btn-style {
    // display: flex;
    // justify-content: space-between;
    margin-top: 300rpx;
    padding: 20rpx;
    .van-button {
      width: 180rpx;
    }
  }
}
.outboundManagement {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: rgba(244, 244, 244, 1);
  padding-bottom: 100rpx;

  .search-box {
    width: 100%;
    // height: 80rpx;
    background-color: rgba(255, 255, 255, 1);
    // display: flex;
    // justify-content: space-between;
    padding: 0 20rpx;

    // 搜索
    .search {
      width: 80% !important;

      .van-search {
        // border: 1px solid;
      }
    }

    // 筛选
    .screen {
      // font-size: 28rpx;
      // display: flex;
      // justify-content: center;
      // align-items: center;
    }
  }

  .content {
    width: 100%;
    padding: 10rpx 20rpx;

    .item-box {
      width: 100%;
      border-radius: 16rpx;
      background-color: rgba(255, 255, 255, 1);
      text-align: center;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
      // margin-top: 10rpx;
      padding: 20rpx 20rpx;
      line-height: 50rpx;

      //   编号+详情
      .plan-number-box {
        // display: flex;
        // justify-content: space-between;

        .plan-number-box-left {
          color: rgba(16, 16, 16, 1);
          // font-size: 24rpx;
          font-family: SourceHanSansSC-regular;

          text {
            color: rgba(46, 136, 238, 1);
          }
        }

        .plan-number-box-right {
          color: rgba(46, 136, 238, 1);
          // font-size: 24rpx;
          font-family: SourceHanSansSC-regular;
        }
      }

      //   类型 + 状态
      .order-type-box {
        // display: flex;
        // justify-content: space-between;

        .order-type-box-left {
          color: rgba(16, 16, 16, 1);
          font-size: 24rpx;
          text-align: left;
          font-family: SourceHanSansSC-regular;
        }

        .order-type-box-right {
          width: 126rpx;
          // height: 40rpx;
          line-height: 50rpx;
          border-radius: 20rpx;
          // text-align: center;
          color: white;
          // font-size: 24rpx;
        }
      }

      // 期望时间
      .expected-time-box {
        padding-bottom: 20rpx;
        border-bottom: 0.5rpx solid #e7e4e4;
        // display: flex;
        // font-size: 24rpx;
      }

      .btn-sytle {
        margin-top: 14rpx;
        font-size: 12rpx;
        // display: flex;
        // justify-content: flex-end;
        // flex-wrap: wrap;

        .del {
          .van-button {
            color: red;
          }
        }

        .examine {
          .van-button {
            color: #ef9c2b;
          }
        }

        .van-button {
          // width: 160rpx;
          // height: 70rpx;
          border-radius: 60rpx;
          margin-left: 10rpx;
          font-size: 24rpx;
          border: 0.5rpx solid rgba(187, 187, 187, 1);
          margin-top: 10rpx;
        }
      }
    }
  }

  .btn-box {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // margin-top: 100rpx;

    .van-button {
      width: 240rpx;
      height: 72rpx;
      border-radius: 50rpx;
      border-color: #bbbbbb;
      color: #62b158;
      font-size: 28rpx;
      line-height: 30rpx;
      font-family: Microsoft Yahei;

      text {
        line-height: 50rpx;
        padding-left: 10rpx;
      }
    }
  }
}

// 弹框样式
.wrapper {
  // display: flex;
  // align-items: center;
  // justify-content: center;
  height: 100%;

  .block {
    width: 100%;
    background-color: #fff;
    margin: 0 30rpx;
    border-radius: 16px;
    padding: 22rpx 14rpx;

    .title {
      width: 100%;
      // display: flex;
      // justify-content: space-between;

      .title-left {
        color: rgba(16, 16, 16, 1);
        // font-size: 36rpx;
        font-weight: bold;
        font-family: SourceHanSansSC-medium;
      }

      .title-right {
        // width: 36rpx;
        // height: 36rpx;
        // border-radius: 50%;
        // background: rgba(62, 61, 61, 1);
        text-align: center;
        // color: #ffffff;
        // font-weight: bold;
        // line-height: 36rpx;
      }
    }

    .btn_style {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      margin-top: 50rpx;

      .van-button {
        width: 180rpx;
        height: 72rpx;
        border-radius: 8rpx;
        color: rgba(255, 255, 255, 1);
        font-size: 28rpx;
        text-align: center;
        font-family: Microsoft Yahei;
        line-height: 50rpx;
        margin-top: 10rpx;
      }

      .mess-hall-btn {
        .van-button {
          width: 255rpx;
          background: #ef9c2b;
        }
      }
    }
  }
}
</style>